<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.item1 {
			grid-area: header;
		}

		.item2 {
			grid-area: menu;
		}

		.item3 {
			grid-area: main;
			min-height: 500px;
		}

		.item4 {
			grid-area: right;
		}

		.item5 {
			grid-area: footer;
			height: 40px;
		}

		.grid-container {
			display: grid;
			grid-template-areas:
				'header header header header header header'
				/* 容器里面有几个 当前行为几个 一般为1到3行*/
				'menu main main main main right'
				'footer footer footer footer footer footer';
			grid-gap: 5px;/* 网格间的间隙 */
			background-color: lightblue;
			padding: 5px;
		}

		.grid-container>div {
			background-color: rgba(255, 255, 255, 0.8);
			text-align: center;
			/* padding: 5px 0; */
			font-size: 30px;
		}

		/* 水平导航页-start */

		ul.demo-horizontal {
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: #333;
		}

		ul.demo-horizontal li {
			float: left;
			margin: 0;
		}

		ul.demo-horizontal li a {
			display: inline-block;
			color: white;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
			border: 0;
		}

		ul.demo-horizontal li a:hover:not(.active) {
			background-color: #000;
		}

		ul.demo-horizontal li a.active {
			background-color: #008CBA;
		}

		ul.divider li {
			float: left;
			border-right: 1px solid #bbb;
		}

		ul.divider li:last-child {
			border-right: none;
		}

		/* 水平导航页-end */
	</style>
	<body>
		<h1>网格布局</h1>

		<p>这个网格布局包含六列三行：</p>

		<div class="grid-container">
			<div class="item1">
				<ul class="demo-horizontal" >
					<li><a class="active" href="javascript:void(0)">Home</a></li>
					<li><a href="javascript:void(0)">News</a></li>
					<li><a href="javascript:void(0)">Contact</a></li>
					<li class="rightli" style="float:right"><a href="javascript:void(0)">About</a></li>
				</ul>
			</div>
			<div class="item2">Menu</div>
			<div class="item3">Main</div>
			<div class="item4">Right</div>
			<div class="item5">Footer</div>
		</div>
	</body>
</html>
